<template>
  <div class='songList'>
    <van-nav-bar
      title="歌单"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <i class="iconfont icon-sousuo"></i>
      </template>
    </van-nav-bar>
    <div class="vanList">
      <!-- 单个列表展示组件 -->
      <song-show
        v-for="(songs, index) in list"
        :key="songs.id"
        :song="songs"
        :index="index"
        @storagePlayingSongList="storagePlayingSongList"
        @showPopup="isShowPopup = true"
      />
      <!-- /单个列表展示组件 -->
    </div>

    <audio-component
      @storagePlayingSongList="storagePlayingSongList"
      @showPopup="isShowPopup = true"
    />

    <van-popup
      v-model="isShowPopup"
      closeable
      close-icon="arrow-down"
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <played-view
        @storagePlayingSongList="storagePlayingSongList"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { NavBar, Popup } from 'vant'
import { getPlayListAll } from '@/api/user'
import songShow from './songShow'
import audioComponent from './audioComponent'
import playedView from '@/components/playedView/index'

export default {
  name: 'songList',
  components: {
    [NavBar.name]: NavBar,
    [Popup.name]: Popup,
    songShow,
    audioComponent,
    playedView
  },
  props: {
    // 歌单ID
    songListId: {
      required: true
    }
  },
  data () {
    return {
      list: [], // 列表内展示的歌曲
      isShowPopup: false
    }
  },
  computed: {
    ...mapState(['loginData'])
  },
  watch: {},
  created () {
    this.loadingMusic()
  },
  mounted () {},
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    async loadingMusic () {
      // 根据歌单 ID 获取歌单内的歌曲列表
      const { data } = await getPlayListAll({
        id: this.songListId,
        cookie: this.loginData.cookie,
        timestamp: new Date().getTime()
      })
      this.list.push(...data.songs)
    },
    // 点击播放后，将获取的列表数据存入播放歌曲列表内（store）
    storagePlayingSongList () {
      this.$store.commit('setPlayingSongList', this.list)
    }
  }
}
</script>
<style lang='less' scoped>
.songList {
  height: 100vh;
  background: rgb(245, 245, 245);
  position: relative;
  /deep/ .van-nav-bar__arrow, /deep/ .van-nav-bar__text {
    color: #383838;
  }
  .icon-sousuo {
    font-weight: bold;
    color: #383838;
  }
  .vanList {
    position: fixed;
    bottom: 70px;
    top: 46px;
    left: 0;
    right: 0;
    overflow-y: auto;
  }
}
</style>
